<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :footer="null"
    :maskClosable="false"
    @cancel="handleCancel"
    :bodyStyle="bodyStyle"
  >
    <div
      class="upload-dragger"
    >
      <a-upload-dragger
        name="file"
        :multiple="true"
        :headers="headers"
        :action="url"
        :fileList="fileList"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或者将文件拖到该区域</p>
        <p class="ant-upload-hint">
          支持单次或批量上传
        </p>
      </a-upload-dragger>
    </div>

  </a-modal>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '../../../store/mutation-types'

export default {
  name: 'FileUpload',
  data () {
    return {
      title: '文件上传',
      visible: false,
      headers: {
        Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
      },
      fileList: [],
      bodyStyle: {
        height: '500px'
      },
      url: process.env.VUE_APP_API_BASE_URL + '/storage/upload'
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    handleChange (info) {
      const fileList = [...info.fileList]
      const status = info.file.status
      if (status !== 'uploading') {
      }
      if (status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
      this.fileList = fileList
    },
    handleCancel () {
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style scoped>
  .upload-dragger{
    height: 50%;
    width: 100%;
  }
</style>
